<%@ page language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>核对订单信息-蜗牛嗨购商城</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
    <style>
        /* 发票信息样式 */
        .invoice-options {
            margin: 10px 0;
            padding: 5px 0;
        }
        
        .invoice-options input[type="radio"] {
            margin-right: 5px;
        }
        
        .invoice-options label {
            margin-right: 20px;
            cursor: pointer;
        }
        
        #ticket_form {
            margin-top: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 15px;
            background-color: #f9f9f9;
        }
        
        #ticket_form input.gray {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        #ticket_form input.gray:focus {
            border-color: #ff9900;
            outline: none;
            box-shadow: 0 0 5px rgba(255, 153, 0, 0.3);
        }
        
        #ticket_form th {
            text-align: right;
            padding-right: 15px;
            color: #666;
        }
        
        #ticket_form td {
            padding: 8px 0;
        }
    </style>
    <script type="text/javascript">
        //用于用户中心左边菜单栏的选择项的样式
        function setSelectedClass(url){
            $('div.cont ul.list li a[href~="'+url+'"]').parent().addClass("current");
        }
    </script>
    <script>
        $(function(){
            // 处理发票类型选择
            $("[name=type]").click(function(){
                let type = $(this).val();
                if(type == 1){
                    $("#ticket_form").hide();
                    // 清空发票相关字段
                    $("#title").val("");
                    $("#taxId").val("");
                    $("#bankCard").val("");
                }else if(type == 2){
                    $("#ticket_form").show();
                    $("#taxIdTr").hide();
                    $("#bankCardTr").hide();
                    // 清空企业相关字段
                    $("#taxId").val("");
                    $("#bankCard").val("");
                }else{
                    $("#ticket_form").show();
                    $("#taxIdTr").show();
                    $("#bankCardTr").show();
                }
            });
            
            // 表单提交前验证
            $("form[name='order_form']").submit(function(e){
                let invoiceType = $("input[name='type']:checked").val();
                
                // 如果选择了个人或企业发票，验证必填字段
                if(invoiceType != 1) {
                    let title = $("#title").val().trim();
                    if(title == "") {
                        alert("请填写发票抬头");
                        $("#title").focus();
                        e.preventDefault();
                        return false;
                    }
                    
                    // 如果是企业发票，验证税号和银行卡
                    if(invoiceType == 3) {
                        let taxId = $("#taxId").val().trim();
                        let bankCard = $("#bankCard").val().trim();
                        
                        if(taxId == "") {
                            alert("请填写企业税号");
                            $("#taxId").focus();
                            e.preventDefault();
                            return false;
                        }
                        
                        if(bankCard == "") {
                            alert("请填写银行卡号");
                            $("#bankCard").focus();
                            e.preventDefault();
                            return false;
                        }
                    }
                }
                
                // 检查地址是否选择
                let addressId = $("input[name='addressId']:checked").val();
                if (!addressId) {
                    alert("请选择收货地址");
                    e.preventDefault();
                    return false;
                }
                return true;
            });
        });
    </script>
</head>
<body class="second">
<div class="brand_list container_2">
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url(images/logo.png);" href="/">电子商务平台</a>
        </h1>
        <ul class="shortcut">
            <li class="first"><a href="ucenter">我的账户</a></li>
            <li><a href="ucenter/order">我的订单</a></li>
            <li class='last'><a href="">使用帮助</a></li>
        </ul>
        <p class="loginfo">
            <c:if test="${not empty sessionScope.loginUser}">
                ${user.account}您好，欢迎您来到嗨购商场！[<a href="/logout" class="reg">安全退出</a>]
            </c:if>
            <c:if test="${empty sessionScope.loginUser}">
                [<a href="/login">登录</a>
                <a class="reg" href="/register">免费注册</a>]
            </c:if>
        </p>
    </div>
    <div class="wrapper clearfix">
        <div class="position mt_10">
            <span>您当前的位置：</span> <a href=""> 首页</a> » 填写核对订单信息
        </div>
        <div class="myshopping m_10">
            <ul class="order_step">
                <li class="current_prev"><span class="first"><a
                        href='javascript:window.history.go(-1);'>1、查看购物车</a></span></li>
                <li class="current"><span>2、填写核对订单信息</span></li>
                <li class="last"><span>3、成功提交订单</span></li>
            </ul>
        </div>

        <form action='/order/submit' method='post' name='order_form'>
            <div class="cart_box m_10">
                <div class="title">填写核对订单信息</div>
                <div class="cont">

                    <!--地址管理 开始-->
                    <div class="wrap_box">
                        <h3>
                            <span class="orange">收货人信息</span>
                        </h3>
                        <!--收货表单信息 开始-->
                        <div class="prompt_4 m_10" id='address_often'>
                            <strong>常用收货地址</strong>
                            <ul class="addr_list">
                             <c:forEach items="${addresses}" var="address">
                                    <li><label><input class="radio" name="addressId"
                                                      type="radio" value="${address.id}"
                                                      <c:if test="${address.def eq 'Y'}">checked</c:if> />${address.accept}&nbsp;&nbsp;&nbsp;&nbsp;${address.province}
                                             ${address.city} ${address.area} ${address.street} ${address.telphone}
                                    </label></li>
                            </c:forEach>
                            </ul>
                        </div>
                    </div>
                    <!--地址管理 结束-->
                    <!--支付方式 开始-->
                    <div class="wrap_box" id='paymentBox'>
                        <h3>
                            <span class="orange">支付方式</span>
                        </h3>
                        <table width="100%" class="border_table">
                            <col width="200px"/>
                            <col/>
                            <tr>
                                <th><input class="radio" name="payType"
                                           title="支付宝" type="radio" value="1" checked="checked"/>支付宝</th>
                                <td>支付手续费：￥0</td>
                            </tr>

                            <tr>
                                <th><input class="radio" name="payType"
                                            type="radio" value="2"/>微信支付</th>
                                <td>支付手续费：￥0</td>
                            </tr>

                            <tr>
                                <th><input class="radio" name="payType"
                                           type="radio" value="3">预存款支付</th>
                                <td>支付手续费：￥0</td>
                            </tr>
                            <tr>
                                <th><input class="radio" name="payType"
                                                  title="货到付款" type="radio" value="4"/>货到付款</th>
                                <td>支付手续费：￥0</td>
                            </tr>
                        </table>
                    </div>
                    <!--支付方式 结束-->
                    <!--购买清单 开始-->
                    <div class="wrap_box">
                        <h3>
                            <span class="orange">购买的商品</span>
                        </h3>

                        <table width="100%" class="cart_table t_c">
                            <col width="115px"/>
                            <col/>
                            <col width="80px"/>
                            <col width="80px"/>
                            <col width="80px"/>

                            <thead>
                            <tr>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th class="last">小计</th>
                            </tr>
                            </thead>

                            <tbody>
                            <!-- <input type="hidden" name="goodsId" value="1" />
                            <input type="hidden" name="num" value="3" /> -->
                            <c:forEach items="${carItems}" var="cartItem">
                            <tr>
                                <td><img src="${cartItem.goodimage}"
                                         width="66px" height="66px" alt="${cartItem.goodname}"
                                         title="${cartItem.goodname}"/></td>
                                <td class="t_l"><a href="goods/${cartItem.goodid}" class="blue">${cartItem.goodname}</a></td>
                                <td>￥<b>${cartItem.goodprice}</b></td>
                                <td>${cartItem.num}</td>
                                <td>￥<b class="red2">${cartItem.goodprice * cartItem.num}</b></td>
                            </tr>
                            </c:forEach>
                            <!-- 商品展示 结束-->

                            </tbody>
                        </table>
                    </div>
                    <!--购买清单 结束-->
                    <div class="wrap_box" id='paymentBox'>
                        <h3>
                            <span class="orange">发票信息</span>
                        </h3>
                        <div class="invoice-options">
                            <label><input type="radio" name="type" value="1" checked>不开发票</label>
                            <label><input type="radio" name="type" value="2">个人</label>
                            <label><input type="radio" name="type" value="3">企业</label>
                        </div>
                        <table width="100%" class="border_table" id='ticket_form' style="display: none">
                            <col width="200px"/>
                            <col/>

                            <tr>
                                <th><label>抬头：</label></th>
                                <td><input class="gray" name="title" id="title"
                                                  title="发票抬头" type="text" placeholder="请输入发票抬头" /></td>
                            </tr>
                            <tr id="taxIdTr">
                                <th><label>企业税号：</label></th>
                                <td><input class="gray" name="taxId" id="taxId"
                                    title="企业税号" type="text" placeholder="请输入企业税号" /></td>
                            </tr>
                            <tr id="bankCardTr">
                                <th><label>银行卡号：</label></th>
                                <td><input class="gray" name="bankCard" id="bankCard"
                                           title="银行卡号" type="text" placeholder="请输入银行卡号" /></td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>

            <!--金额结算-->
            <div class="cart_box" id='amountBox'>
                <div class="cont_2">
                    <hr class="dashed"/>
                    <div class="pink_box gray m_10">
                        <table width="100%" class="form_table t_l">
                            <col width="220px"/>
                            <col/>
                            <col width="250px"/>
                            <tr>
                                <td class="t_r" colspan="3"><b class="price f14">应付总额：<span
                                        class="red2">￥<b id='final_sum'>${totalPrice}</b></span>元
                                </b></td>
                            </tr>
                        </table>
                    </div>
                    <p class="m_10 t_r">
                        <input type="submit" class="submit_order"/>
                    </p>
                </div>
            </div>

        </form>

    </div>
    <div class="footer">
        <p class="links">
            <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a
                href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
        </p>
        Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
    </div>
</div>
</body>
</html>
